import React from "react";
import { Chart } from "react-chartjs-2";
import { connect } from "react-redux";
import {
    Chart as ChartJS,
    LinearScale,
    CategoryScale,
    BarElement,
    PointElement,
    LineElement,
    Legend,
    Tooltip,
    LineController,
    BarController,
  } from 'chart.js';
  ChartJS.register(
    LinearScale,
    CategoryScale,
    BarElement,
    PointElement,
    LineElement,
    Legend,
    Tooltip,
    LineController,
    BarController
  );
const MultitypeChart = ({ theme, title , configuration, description, chartData }) => {
    let delayed;
    const options = { 
      plugins: {
        width:"300",
          legend: {
          position: 'bottom',
          labels: {
              usePointStyle: true,
              pointStyle: 'circle',
              // pointStyleWidth:'15',
              }
          }
      },
      animation: {
        onComplete: () => {
          delayed = true;
        },
        delay: (context) => {
          let delay = 0;
          if (context.type === 'data' && context.mode === 'default' && !delayed) {
            delay = context.dataIndex * 300 + context.datasetIndex * 100;
          }
          return delay;
        },
      },
      scales: {
        x: {
          grid: {
            display: false, // 隐藏x轴
          },
        },
        y: {
          display: false, // 隐藏y轴和y坐标轴
          ticks: {
            display: false, // 隐藏刻度
            label: false  // 隐藏刻度数字
        }
        }
      }
      };
    const data = {
    labels:chartData.labels,
    datasets:chartData.datasets,
    };
  return (
    <>
        <h5 style={{fontSize:'1.1rem',color:'rgb(108, 117, 125)',marginBottom:'2.5rem'}}>Team Performance <br/> 
        <span style={{fontSize:'0.9rem',color:'rgba(108, 117, 125,0.7)'}}>performance of each team on all assessment</span>
        </h5>
        <div className="chart">
          <Chart type='bar' data={data} options={options} />
        </div>
    </>

  );
};

export default connect(store => ({
  theme: store.theme.currentTheme
}))(MultitypeChart);
